{% extends "layout.html" %}
{% block myhead %}
<style>
    .itemlist{
        font-size:16px;
    }

    .itemlevel1{
        background-color:lightgray;
    }

    .itemlevel2{
        background-color:lightblue;
    }

    .itemlevel3{
        background-color:pink;
    }

    .itemlevel4{
        background-color:red;
    }

    .itemlevel5{
        background-color:orange;
    }

    .center {
        display: block;
        margin: auto;
        width: 50%;
    }

</style>
<title>Index</title>
{%endblock%}
{% block mytitle %}
Index Page
{% endblock %}
{% block mybody %}
<h2 class="unselectable">Item List</h2>
<ul class="mdui-list itemlist">
    {% for item in items %}
    <li class="mdui-list-item mdui-ripple itemlevel{{item.level}}">{{item.item}}</li>
    {% endfor %}
</ul>
<a class="mdui-btn center" href="{{url_for('main_page')}}">Main Page</a>
{% endblock %}
